<template>
    <div class="content-main" v-if="showBusinessFlowFlag == 3">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/teacher/index' }">实训案例</el-breadcrumb-item>
                <el-breadcrumb-item>影院网站数据分析系统 - 业务流程</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="business-process">
                <ul>
                    <li v-for="(item, index) in itemListData" :class="{active: item.id == itemId}" >
                        <span @click="tab(item.id)">{{ item.name }}</span>
                    </li>
                </ul>
                <div class="tabCon">
                    <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
                        <swiper-slide v-for="(item,index) in swiperSlides" :key="index"><img :src="item" /></swiper-slide>
                        <div class="swiper-button-prev" slot="button-prev"></div>
                        <div class="swiper-button-next" slot="button-next"></div>
                    </swiper>
                    <!-- <div class="tab-thumbs">
                        <div class="swiper-button-next" slot="button-next"></div>
                        <div class="swiper-button-prev" slot="button-prev"></div>
                        <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
                            <swiper-slide v-for="(item, index) in swiperSlides" :key="index"><img :src="item" /></swiper-slide>
                        </swiper>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
    <div class="content-main" v-else-if="showBusinessFlowFlag == 2"  style="height:100%;">
        <div class="project-tips-box">
            <img src="./../../assets/images/project_tips2.jpg" />
        </div>
    </div>
</template>

<script>
    import 'node_modules/swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import { mapState } from 'vuex'
    export default {
        components: {
            swiper,
            swiperSlide
        },
        data () {
            return {
                projectId: '',
                showBusinessFlowFlag: '',
                //轮播config
                swiperOptionTop: {
                    spaceBetween: 10,
                    loop: true,
                    loopedSlides: 5,
                    touchRatio: 0.2,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                },
                // swiperOptionThumbs: {
                //     spaceBetween: 10,
                //     slidesPerView: 9,
                //     centeredSlides: true,
                //     touchRatio: 0.2,
                //     loop: true,
                //     slideToClickedSlide: true,
                //     navigation: {
                //         nextEl: '.swiper-button-next',
                //         prevEl: '.swiper-button-prev'
                //     }
                // },
                swiperSlides: [
                ],

                dialogVisible: false,
                itemListData: [],
                itemId: ''
            }
        },
        created () {
            this.projectId = JSON.parse(window.localStorage.getItem('teacher-project-id')).itemId
            this.showBusinessFlowFlag = this.$store.state.itemServiceValue.showBusinessFlowFlag
            if(this.showBusinessFlowFlag == 3){
                this.init() //初始化
            }
        },
        mounted () {
            // this.$nextTick(() => {
            //     const swiperTop = this.$refs.swiperTop.swiper
            //     const swiperThumbs = this.$refs.swiperThumbs.swiper
            //     swiperTop.controller.control = swiperThumbs
            //     swiperThumbs.controller.control = swiperTop
            // })
        },
        methods: {
            init(status){
                let self = this
                self.fileList = []
                self.fileNameList = []
                self.$http.get('/dataplatform/businessFlow/listDataName?itemId='+self.projectId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.itemListData = res.data
                        if(self.itemId == ''){
                            self.itemId = res.data[0].id
                        }
                        self.listDetail()
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })

            },
            tab(index) {
                this.itemId = index;
                this.listDetail()
            },
            listDetail(){
                let self = this
                self.$http.get('/dataplatform/businessFlow/detail?id='+self.itemId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.swiperSlides = res.data.picUrl
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            }
        },
        computed:{
			...mapState(['itemServiceValue'])
		}
    }
</script>
